<template>
    <div class="home-count">
        <div>
            <Title title="账号管理" >
                <el-button type="default" @click="dels" size="">批量删除</el-button>
            </Title>
        </div>
        <!-- //用户列表 -->
        <div class="list-box">
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelect">
                <el-table-column type="selection" width="55" height="50px"  />
                <!-- 账号 -->
                <el-table-column label="账号" width="251" height="50px">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.account }}</span>
                        </div>
                    </template>
                </el-table-column>

                <!-- 用户组 -->
                <el-table-column label="用户组" width="251" height="50px">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.userGroup }}</span>
                        </div>
                    </template>
                </el-table-column>

                <!-- 创建时间 -->
                <el-table-column label="创建时间" width="251" height="50px">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.ctime }}</span>
                        </div>
                    </template>
                </el-table-column>

                <!-- 操作 -->
                <el-table-column label="操作" height="50px" width="230">
                    <template #default="scope">
                        <el-button size="normal" @click="dialogFormVisible = true; handleEdit(scope.$index, scope.row)"
                            type="primary">
                            编辑
                        </el-button>
                        <el-button size="normal" type="danger" @click="open(), handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 弹出框 -->
        <el-dialog v-model="dialogFormVisible" title="修改账号信息" width="500">
            <el-form :model="editForm">
                <el-form-item label="账号名" :label-width="formLabelWidth">
                    <!-- autocomplete 开启用户输入记录功能 -->
                    <el-input v-model="editForm.account" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户组" :label-width="formLabelWidth">
                    <el-select v-model="editForm.userGroup">
                        <el-option label="普通管理员" value="普通管理员" />
                        <el-option label="超级管理员" value="超级管理员" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false; submitEditForm()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <div class="pagination">
            <Pagination :total="total" @changePage="changePage" />
        </div>

    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Title from '@/views/home/component/Title.vue';
import Pagination from '@/views/home/component/Pagination.vue';
import { getUserList, editUser, batchDelete } from '@/api/users'
import { ElMessage, ElMessageBox } from 'element-plus'
// 获取用户列表
const total = ref(0);
const tableData = ref([]);
const ids = ref([]);//选中的id
//当前页
let currentPage1 = 1;
//默认没有条数
let pageSize1 = 5;

//对话框显式 默认input框宽度
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//对话框数据
const editForm = reactive({
    account: '',
    userGroup: '',
})
const dataId = { id: '' };

//改变当前页和每页显示条数
const changePage = async (currentPage, pageSize) => {
    //更新当前页和没有条数
    currentPage1 = currentPage;
    pageSize1 = pageSize;
    //获取数据
    const ref = await getUserList(currentPage, pageSize);
    total.value = ref.total;
    tableData.value = ref.data;
    // 格式化时间
    tableData.value.forEach((item) => {
        item.ctime = item.ctime.slice(0, 10)
    })
}
changePage(currentPage1, pageSize1);


// 编辑数据
const handleEdit = async (index, row) => {
    //index 为与当前表格的第几行 0开始
    //row 一行的数据
    dataId.id = row.id;
    editForm.account = row.account;
    editForm.userGroup = row.userGroup;
}
//点击确定按钮修改数据
const submitEditForm = async () => {
    console.log({ ...dataId, ...editForm });
    //调用接口 修改数据
    const { code, msg } = await editUser({ ...dataId, ...editForm });
    if (code == 0) {
        ElMessage.success(msg);
        //获取修改完成的用户列表
        changePage(currentPage1, pageSize1);
    } else {
        ElMessage.error(msg);
    }
}


// 删除数据id获取
const handleDelete = (index, row) => {
    console.log(index, row);
    dataId.id = row.id;
}
//删除弹出框
const open = () => {
    ElMessageBox.confirm(
        '真的要删除这个用户吗?',
        '删除用户提示',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        //点击确定按钮 
        .then(async () => {
            //调用接口删除数据
            const { code, msg } = await deleteUser(dataId);
            if (code == 0) {
                ElMessage.success(msg);
                //获取修改完成的用户列表
                changePage(currentPage1, pageSize1);
            }
            else {
                ElMessage.error(msg);
            }
        })
        // 点击取消按钮
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

//选中框的变化监听事件
const handleSelect = (val) => {
    ids.value= val.map(item => item.id);
}

//批量删除
const dels = async()=>{
    // console.log(ids.value);
    //转json字符串
    ids.value = JSON.stringify(ids.value);
    // console.log(ids);
    const {code,msg} = await batchDelete({ids:ids.value});
    if(code == 0){
        ElMessage.success(msg);
        //获取修改完成的用户列表
        changePage(currentPage1, pageSize1);
    }else{
        ElMessage.error(msg);
    }
}
</script>

<style scoped>
.home-count {
    width: 100%;
    height: 100%;
}

.pagination {
    margin-top: 20px;
}

.list-box {
    width: 100%;
}

:deep(.el-table tr) {
    height: 60px;
}
</style>